<template>
  <div class="main_spac1">
    <div class="main_white padding10">
      <div class="main-controls-wrap">
        <el-button class="mainor_tea" @click="addLabel">新增</el-button>
      </div>
      <MainTable
        ref="orderTable"
        :loading="listLoading"
        :columns="columns"
        :tableData="tableData"
        :height="630"
      >
        <el-table-column
          label="管理操作"
          align="left"
          fixed="right"
          width="240"
          prop="controls"
          class-name="main_hei"
        >
          <template slot-scope="scope">
            <MainLink title="编辑" color="#42BEAA" @linkClick="editLabel(scope.row)"></MainLink>
            <MainLink title="批量选择用户" color="#666666" @linkClick="showAddUser(scope.row)"></MainLink>
            <el-popconfirm
              confirm-button-text="是的"
              cancel-button-text="取消"
              icon="el-icon-info"
              icon-color="#03A98E"
              title="确定删除吗？"
              @confirm="deleteLabel(scope.row)"
            >
              <MainLink title="删除" color="#FF5566" slot="reference"></MainLink>
            </el-popconfirm>
          </template>
        </el-table-column>
      </MainTable>
      <div class="main_num boxdq marginTop10">
        <div></div>
        <div class="main_num_r">
          <MainPagination
            :current-page="page"
            :page-sizes="[10, 20, 30, 50, 100]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            background
            @size-change="changeLimit"
            @current-change="changePage"
          />
        </div>
      </div>
      <MainDialog
        :title="dialogType === 1 ? '新增标签' : '编辑标签'"
        :showDialog="examineLabel"
        width="480px"
        @close="handleClose">
        <template v-slot:content>
          <el-form :model="examineForm" :rules="rules" label-position="right" label-width="100px" ref="examineFormRef" hide-required-asterisk>
            <el-form-item label="标签名称：" prop="label">
              <el-input v-model="examineForm.label" placeholder="请输入标签名称"></el-input>
            </el-form-item>
          </el-form>
        </template>
        <template v-slot:footer>
          <div class="main-dialog-btn align-right">
            <el-button class="mainor_tea" @click="handleClose">取消</el-button>
            <el-button type="primary" class="submit" @click="submitExamine">确定</el-button>
          </div>
        </template>
      </MainDialog>
    </div>
  </div>
</template>
<script>
  import { list, addLabel, editLabel, delLabel } from '@/api/order/orderLabel'
  import { packApi } from '@/utils/public'
  import { orderLabel } from './mockData'
  const { columns } = orderLabel
  export default {
    name: 'OrderLabel',
    data() {
      return {
        listLoading: false,
        columns,
        tableData: [],
        pageSize: 20,
        page: 1,
        total: 0,
        examineLabel: false,
        examineForm: {
          label: ''
        },
        rules: {
          label: [{ required: true, message: '请输入标签名称', trigger: 'blur' },]
        },
        dialogType: 1, //  1为新增，2为编辑
        labelId: null,
        dialogShowUser: false
      }
    },
    mounted() {
      this.getList()
    },
    methods: {
      getList() {
        this.listLoading = true
        list(packApi({ pagesize: this.pageSize, page: this.page })).then(res => {
          if(res.errcode == 0) {
            this.listLoading = false
            this.tableData = res.data.list
            this.total = res.data.total
          }
        })
      },
      // 分页
      changeLimit(pageSize) {
        this.pageSize = pageSize;
        this.getList();
      },
      changePage(page) {
        this.page = page;
        this.getList();
      },
      //  新增标签
      addLabel() {
        this.dialogType = 1
        this.examineLabel = true
        this.$refs.examineFormRef.clearValidate()
      },
      //  编辑标签
      editLabel(row) {
        this.dialogType = 2
        this.labelId = row.id
        this.examineForm.label = row.label
        this.examineLabel = true
      },
      handleClose() {
        this.examineForm.label = "";
        this.examineLabel = false
        this.labelId = null
      },
      submitExamine() {
        this.$refs.examineFormRef.validate((valid) => {
          if (valid) {
            const api = this.dialogType === 1 ? addLabel : editLabel
            const params = this.dialogType === 1 ? packApi({ label: this.examineForm.label }) : packApi({ label: this.examineForm.label, id: this.labelId })
            api(params).then(res => {
              if(res.errcode == 0) {
                this.$message.success(this.dialogType === 1 ? '新增标签成功' : '编辑标签成功')
                this.handleClose()
                this.getList()
              }else {
                this.$message.error(res.errmsg)
              }
            })
          }
        });
      },
      deleteLabel(row) {
        delLabel(packApi({ id: row.id })).then(res => {
          if(res.errcode == 0) {
            this.$message.success('删除成功')
            this.getList()
          }else {
            this.$message.error(res.errmsg)
          }
        })
      },
      showAddUser(row) {
        this.$router.push(`/order/label/changeUser/${row.id}`)
      },
      userSubmit() {},
    }
  }
</script>
<style lang="scss" scoped>
@import "@/styles/variables.scss";
@import "@/styles/newIndex.scss";
.main-dialog-btn {
  &.align-right {
    text-align: right;
  }
  .submit {
    color: #fff;
    border-color: $subActive;
    background-color: $subActive;
    &:hover {
      background-color: rgba(3,169,142,.8);
      border-color: rgba(3,169,142,.8);
    }
  }
}
</style>